<template>
  <div class="module">
    <div class="s-tit">
      <VTit :color="['#33ba68', '#50ce81', '#fff']">通知反馈</VTit>
    </div>
    <div class="content-box">
      <div class="no-data-tip" v-if="!list[0]">
        <p> 播种一种行为，收获一种习惯；</p>
        <p> 播种一种习惯，收获一种性格；</p>
        <p> 播种一种性格，收获一种命运。</p>
      </div>
      <ul class="list">
        <li class="item cf" v-for="(item, i) in list" :key="i">
          <p class="text ep">
            <i>{{i+1}}.</i>
            <i class="rule-name">{{item.grade_name}}{{item.class_name}}{{item.user_name}}，{{item.rule_item_name}}</i>
            <!-- <i class="score">{{item.score}}分</i> -->
          </p>
          <span class="date-time">
            <i class="score">{{item.score}}分</i>
            <i class="date">{{item.date}}</i>
            <i class="time">{{item.time}}</i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import VTit from '@/components/comm/VTit.vue'
export default {
  components: {
    VTit
  },
  props: {
    list: {
      type: Array,
      default () { return [] }
    }
  },
  data () {
    return {
      str: '2018.10.10 09:00'
    }
  }
}
</script>

<style scoped>
i {
  font-style: normal;
}
.module {
}

.no-data-tip {
  font-size: 24px;
  line-height: 50px;
}
.content-box {
  position: relative;
  height: 300px;
  overflow-y: hidden;
  padding: 10px 20px;
  margin-bottom: 0;
}
.list {
  padding-left: 0;
  list-style-position: inside;
  /* height: 60px; */
}
.item {
  line-height: 50px;
  font-size: 24px;
  letter-spacing: 2px;
}
.item .text {
  /* height: 50px;
  display: inline-block; */
  float: left;
  overflow: hidden;
  width: 630px;
}
.rule-name {
  color: #666;
}
.score {
  color: #ff6600;
}
.date-time {
  float: right;
}
.date {
  color: #aaaaaa;
}
.time {
  color: #f79c26;
}
.s-tit {
  /* height: 38px; */
  position: relative;
}
.s-tit::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 144px;
  width: 775px;
  border-bottom: 1px dashed #ddd;
  }
</style>
